<template>
  <div class="collcate">
    <div class="head">
      <div class="speed">
        <el-steps :space="200" :active="active" finish-status="success">
          <el-step title="选择配置"></el-step>
          <el-step title="确认付款"></el-step>
          <el-step title="完成购买"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="main" v-if="show">
      <h2>商品溯源服务</h2>
      <div style="width:100%;">
        <div class="content">
          <div style="width:100%;">
            <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                v-for="item in bageService"
                :key="item.id"
                :name="item.name"
                :label="item.name"
              >
                <div class="tab-pane_p">
                  <p>
                    <img src="@/assets/images/icon1.png" alt />商品种类：
                    <span>{{item.category}}</span> 种
                  </p>
                  <p>
                    <img src="@/assets/images/icon2.png" alt />溯源码：
                    <span>{{item.code}}</span> 个
                  </p>
                  <p>
                    <img src="@/assets/images/icon3.png" alt />存储空间：
                    <span>{{item.capacity}}</span> G
                  </p>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="time">
          <p>订购时长：</p>
          <div class="time-radio">
            <el-radio v-model="radio" label="1" @change="changeCAT">1个月</el-radio>
            <el-radio v-model="radio" label="3" @change="changeCAT">3个月</el-radio>
            <el-radio v-model="radio" label="6" @change="changeCAT">6个月</el-radio>
            <el-radio v-model="radio" label="12" @change="changeCAT">12个月</el-radio>
          </div>
        </div>
      </div>
      <div class="foot">
        <p>
          费用：
          <b>{{feeCAT}} CAT</b>
        </p>
        <el-button type="primary" @click="goToPay">去支付</el-button>
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="!show">
        <div v-if="show1" class="main">
          <div class="order-top">
            <h3>确认订单</h3>
            <div class="order-class">
              <div class="order-serveConfig">
                <p>服务配置：</p>
                <span>{{activeName}}</span>
              </div>
              <div class="order-serveConfig">
                <p>存储空间：</p>
                <span>{{row.capacity}}G</span>
              </div>
              <div class="order-serveConfig">
                <p>商品种类：</p>
                <span>{{row.category}}种</span>
              </div>
              <div class="order-serveConfig">
                <p>订购时长：</p>
                <span>{{radio}}个月</span>
              </div>
              <div class="order-serveConfig">
                <p>溯源码：</p>
                <span>{{row.code}}个</span>
              </div>
              <div class="order-serveConfig">
                <p>费用：</p>
                <span>{{feeCAT1}} {{pay?(pay==1?'CAT':'元'):'CAT'}}</span>
              </div>
            </div>
          </div>
          <div class="coll-dialog">
            <h3>支付方式</h3>
            <span class="coll-dialog_way" v-if="text1">
              <p @click="payment(1)" :class="pay==1?'active':''">
                <img src="../../../assets/images/icon_yue.png" alt />
                <span>账户余额</span>
                <span class="dui" v-if="pay==1">
                  <i class="el-icon-check"></i>
                </span>
              </p>
              <p @click="payment(2)" :class="pay==2?'active':''">
                <img src="../../../assets/images/icon_zhifubao.png" alt />
                <span>支付宝</span>
                <span class="dui" v-if="pay==2">
                  <i class="el-icon-check"></i>
                </span>
              </p>
              <p @click="payment(3)" :class="pay==3?'active':''">
                <img src="../../../assets/images/icon_weixin.png" alt />
                <span>微信</span>
                <span class="dui" v-if="pay==3">
                  <i class="el-icon-check"></i>
                </span>
              </p>
            </span>
            <span class="coll-dialog_way" v-else>
              <p class="active">
                <img src="../../../assets/images/icon_yue.png" alt />
                <span>{{pay==1?"账户余额":(pay==2?"支付宝":"微信")}}</span>
                <span class="dui">
                  <i class="el-icon-check"></i>
                </span>
              </p>
            </span>
          </div>
          <div class="footer">
            <div class="coll-dialog_foot">
              <el-checkbox v-model="radio1">
                同意
                <span style="color:#76D4CE;">《布鲁克商城服务协议》</span>
              </el-checkbox>
            </div>
            <div class="btn-foot">
              <el-button @click="show1 = false,show=true,active=1" v-if="text1">返回</el-button>
              <el-button type="primary" @click="paymentIn" v-if="text1">支付</el-button>
              <el-button type="primary" @click="paymentOut" v-else>继续支付</el-button>
            </div>
          </div>
        </div>
        <transition name="el-fade-in-linear">
          <div v-if="!show1" class="congratulation">
            <i class="el-icon-success"></i>
            <p>恭喜您开通布鲁克商城溯源服务</p>
            <el-button type="primary" @click="allin">进入商品溯源后台</el-button>
          </div>
        </transition>
      </div>
    </transition>
    <el-dialog
      :visible.sync="dialogVisible"
      width="285px"
      class="coll-dialog1"
      top="25vh"
      center="center"
      title="扫码支付"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <span class="coll-dialog1_way" v-loading="loading">
        <img width="200" height="200" :src="imgurl" alt />
      </span>
      <span slot="footer" class="dialog-footer">
        <div class="footer-text">
          <p>
            请用
            <b>{{text}}</b> 扫描二维码完成支付
            <br />完扫描支付后，若没有自动跳转
          </p>
          <span>请联系客服</span>
        </div>
        <div class="nopay-btn my-btn">
          <el-button @click="cancelTraceServiceOrder" :disabled="disabled">取消支付</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import sm2Encrypt from "@/lib/sm2";
import { KEY, Add } from "@/utils/service.js";
import { MOUTN } from "@/utils/AES.js";
export default {
  data() {
    return {
      activeName: "标准溯源",
      activeName1: "first",
      dialogVisible: false,
      radio: "1",
      radio1: "",
      password: null,
      show: true,
      show1: true,
      active: 1,
      pay: 1,
      QRcode: "",
      payId: null,
      bageService: [],
      feeCAT: null,
      feeCAT1: null,
      tabIndex: 0,
      row: {},
      ratePrice: null,
      KEY,
      MOUTN,
      imgurl: "",
      text: "",
      text1: true,
      loading: "",
      disabled: false,
      transactionId: "",
      payLoading: false,
    };
  },
  created() {
    this.getAllTraceService();
    this.getCatCnyRate();
    this.raceServiceOrder();
  },
  methods: {
    async raceServiceOrder() {
      this.payLoading = this.$loading({
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(225,225, 225, 0.7)",
      });
      const res = await this.axios.raceServiceOrder();
      this.payLoading.close();
      if (res.data.data.payStatus) {
        if (res.data.data.payStatus == 1) {
          this.show = false;
          let data = res.data.data;
          this.activeName = data.sourceName;
          this.row.capacity = Add(data.buyCapacity, data.capacity);
          this.row.category = Add(data.buyCategory, data.category);
          this.row.code = Add(data.buyCode, data.code);
          this.radio = data.purchaseTime;
          this.feeCAT1 = data.payMoney;
          this.imgurl = data.qrcode;
          this.text1 = false;
          if (data.payType == 1) {
            this.text = "CAT Wallet";
            this.pay == 1;
          } else if (data.payType == 2) {
            this.text = "支付宝";
            this.pay == 2;
          } else if (data.payType == 3) {
            this.text = "微信";
            this.pay == 3;
          }
          this.radio1 = true;
          this.transactionId = data.transactionId;
        } else if (res.data.data.payStatus == 2) {
          this.$emit("func", false);
        }
      }
    },
    async cancelTraceServiceOrder() {
      // 取消支付
      let sm2 = sm2Encrypt(this.transactionId, KEY + MOUTN, 0);
      const res = await this.axios.cancelTraceServiceOrder({
        transactionId: sm2,
      });
      if (res.data.code == 200) {
        this.$message({
          message: "已取消",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.show = true;
            this.radio = "1";
            this.text1 = true;
            this.radio1 = false;
            this.dialogVisible = false;
          },
        });
      } else if (res.data.code == 33001 || res.data.code == 33003) {
        this.$router.go(0);
      } else {
        this.$message.warning(res.data.message);
      }
    },
    async getCatCnyRate() {
      const res = await this.axios.getCatCnyRate();
      this.ratePrice = res.data.data.ratePrice;
    },
    async buyTraceService() {
      // 购买溯源服务
      let obj = {
        serviceId: this.payId,
        payType: this.pay,
        purchaseTime: this.radio,
        totalMoney: this.feeCAT1,
      };
      this.payLoading = this.$loading({
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(225,225, 225, 0.7)",
      });
      let sm2 = sm2Encrypt(JSON.stringify(obj), KEY + MOUTN, 0);
      this.loading = true;
      this.imgurl = "";
      this.disabled = true;
      const res = await this.axios.buyTraceService({ data: sm2 });
      this.payLoading.close();
      if (res.data.code == 200) {
        this.dialogVisible = true;
        this.imgurl = res.data.data.qrcode;
        this.transactionId = res.data.data.transactionId;
        this.disabled = false;
        this.loading = false;
      } else if (res.data.code == 33002) {
        this.$message({
          message: res.data.message,
          type: "warning",
          duration: 2000,
          onClose: () => {
            this.$router.go(0);
          },
        });
      } else {
        this.$message.warning(res.data.message);
        this.dialogVisible = false;
      }
    },
    goToPay() {
      // 去支付
      // return this.$message.warning("敬请期待");
      this.show = false;
      this.show1 = true;
      this.active = 2;
      this.pay = null;
      this.feeCAT1 = this.feeCAT;
    },
    handleClick(tab, event) {
      this.bageService.map((el) => {
        if (el.name == this.activeName) {
          this.row = el;
          this.payId = el.id;
        }
      });
      this.tabIndex = tab.index;
      this.changeCAT();
    },
    changeCAT() {
      this.feeCAT = this.bageService[this.tabIndex].monthPrice * this.radio;
    },
    allin() {
      this.$emit("func", false);
    },
    async getAllTraceService() {
      const res = await this.axios.getAllTraceService();
      this.bageService = res.data.data;
      this.row = this.bageService[0];
      this.payId = this.bageService[0].id;
      this.changeCAT();
    },
    paymentIn() {
      if (!this.pay) return this.$message.warning("请选择支付方式");
      if (!this.radio1) return this.$message.warning("请勾选服务协议");
      this.buyTraceService();
      if (this.pay == 1) {
        this.text = "CAT Wallet";
      } else if (this.pay == 2) {
        this.text = "支付宝";
      } else if (this.pay == 3) {
        this.text = "微信";
      }
    },
    paymentOut() {
      if (!this.pay) return this.$message.warning("请选择支付方式");
      if (!this.radio1) return this.$message.warning("请勾选服务协议");
      this.dialogVisible = true;
      if (this.pay == 1) {
        this.text = "CAT Wallet";
      } else if (this.pay == 2) {
        this.text = "支付宝";
      } else if (this.pay == 3) {
        this.text = "微信";
      }
    },
    payment(index) {
      this.pay = index;
      if (index != 1) {
        this.feeCAT1 = this.feeCAT * this.ratePrice;
      } else {
        this.feeCAT1 = this.feeCAT;
      }
    },
    getOrderstate() {
      let num = 0;
      this.timers = setInterval(() => {
        num++;
        let obj = {
          orderId: self.orderId.data,
        };
        this.axios.payStatus(obj).then((res) => {
          if (res.data.data == 200) {
            clearInterval(this.timers);
          }
        });
        if (num == 500) {
          this.boxShow = false;
          clearInterval(this.timers);
        }
      }, 1500);
    },
  },
  beforeDestroy() {
    if (this.timers) {
      clearInterval(this.timers);
    }
  },
};
</script>

<style lang="scss" scoped>
.collcate {
  h3 {
    padding-left: 25px;
    border-left: 4px solid #5bc6bb;
  }
  .head {
    max-width: 1200px;
    padding: 0 25px;
    background-color: #fff;
    margin: 0 auto;
    .speed {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ececec;
    }
    /deep/ .el-steps {
      padding: 35px;
      padding-left: 55px;
      width: 500px;
      justify-content: center;
      .el-step__title {
        margin-left: -18px;
        color: #333;
        font-weight: normal;
      }
      .el-step__icon {
        background-color: #e9eef2;
        color: #999;
        border: 0;
      }
      .el-step__head.is-success {
        color: #fff;
        border-color: #5bc6bb;
        .el-step__icon {
          background-color: #5bc6bb;
          i {
            font-weight: bold;
            color: #fff;
          }
        }
      }
      .el-step__title.is-success {
        color: #5bc6bb;
      }
    }
  }
  .congratulation {
    max-width: 1200px;
    min-height: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    i {
      font-size: 50px;
      color: rgba(0, 186, 173, 1);
      margin-top: -50px;
    }
    p {
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      margin: 25px 0;
    }
    /deep/ .el-button {
      border-radius: 5px;
      background-color: rgba(0, 186, 173, 1);
      border-color: rgba(0, 186, 173, 1);
    }
  }
  .main {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 25px;
    h2 {
      color: rgba(16, 16, 16, 1);
      padding-left: 25px;
      border-left: 4px solid #5bc6bb;
      margin-bottom: 25px;
    }
    .content {
      display: flex;
      padding-bottom: 20px;
      p {
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
      }
      /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav,
      /deep/ .el-tabs--card > .el-tabs__header {
        border: 0;
      }
      /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border: 0;
        border-top: 3px solid #5bc6bb;
        color: #333;
        background-color: #fff;
      }
      /deep/ .el-tabs__item:hover {
        color: #303133;
      }
      /deep/ .el-tabs__item {
        text-align: center;
        width: 140px;
        box-sizing: border-box;
        background-color: #fbfbfb;
        border: 1px solid #e4e7ed;
      }
      .tab-pane_p {
        height: 330px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        b {
          color: #00baad;
          font-size: 16px;
        }
        p {
          font-size: 16px;
          width: 300px;
          height: 50px;
          border: 1px solid rgba(91, 198, 187, 1);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            margin-right: 5px;
            margin-top: 2px;
          }
          span {
            font-size: 22px;
            color: #f56c6c;
            margin-right: 5px;
          }
        }
      }
    }
    .time {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        margin-right: 15px;
        font-size: 16px;
      }
      /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #5bc6bb;
        background: #5bc6bb;
      }
      /deep/ .el-radio__inner:hover {
        border-color: #5bc6bb;
      }
      /deep/ .el-radio__input.is-checked + .el-radio__label {
        color: #5bc6bb;
      }
    }
  }
  .foot {
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 50px;
    p {
      padding-bottom: 5px;
      margin-right: 25px;
      b {
        color: #f56c6c;
      }
    }
    /deep/ .el-button--primary {
      background-color: rgba(118, 212, 206, 1);
      border-color: rgba(118, 212, 206, 1);
      padding: 10px 30px;
    }
    /deep/ .el-button:active {
      background-color: rgb(15, 184, 172);
    }
  }
  .coll-dialog {
    margin-top: 30px;
    .coll-dialog_way {
      margin-top: 20px;
      display: flex;
      min-height: 100px;
      p {
        width: 180px;
        height: 50px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(212, 212, 212, 1);
        opacity: 1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        img {
          width: 20px;
          margin-right: 8px;
        }
        .dui {
          border: 20px solid #5bc6bb;
          border-bottom-color: transparent;
          border-left-color: transparent;
          position: absolute;
          top: 0;
          right: 0;
          i {
            position: absolute;
            top: -12px;
            right: -16px;
            color: #fff;
          }
        }
      }
      .active {
        background: rgba(91, 198, 187, 0.1);
      }
      p + p {
        margin-left: 20px;
      }
      p:hover {
        border: 1px solid rgba(91, 198, 187, 1);
      }
    }
    .coll-dialog_pay {
      b {
        width: 80%;
        display: inline-block;
        text-align: right;
        color: #333;
      }
    }
  }
  .order-top {
    .order-class {
      margin-top: 25px;
      display: flex;
      flex-wrap: wrap;
      .order-serveConfig {
        display: flex;
        width: 50%;
        color: #ccc;
        margin-bottom: 10px;
        p {
          min-width: 80px;
        }
        span {
          color: #333;
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .coll-dialog_foot {
      /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #333;
      }
      /deep/ .is-checked .el-checkbox__inner {
        background-color: #5bc6bb;
        border-color: #5bc6bb;
      }
      /deep/ .el-checkbox__inner:hover {
        border-color: #5bc6bb;
      }
      /deep/ .is-focus .el-checkbox__inner {
        border-color: #5bc6bb;
      }
    }
    .btn-foot {
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        width: 150px;
      }
      /deep/ .el-button--default:active {
        color: #76d4ce;
        border-color: #76d4ce;
        background-color: #ccf7f4;
        outline: 0;
      }
      /deep/ .el-button--default:hover,
      .el-button--default:focus {
        color: #76d4ce;
        border-color: #aaddda;
      }
      /deep/ .el-button + .el-button {
        margin-left: 55px;
      }
      /deep/ .el-button--primary {
        background-color: #76d4ce;
        border-color: #76d4ce;
      }
      /deep/ .el-button--primary.is-active,
      .el-button--primary:active {
        background-color: #58b6b0;
        border-color: #58b6b0;
      }
    }
  }
  .coll-dialog1 {
    /deep/ .el-dialog__body {
      padding: 10px 25px 0;
    }
    /deep/ .el-dialog__footer {
      padding: 0;
    }
    p {
      line-height: 35px;
    }
    .footer-text {
      padding: 0 20px;
    }
    .coll-dialog1_way {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .dialog-footer {
      line-height: 22px;
      span {
        display: inline-block;
        margin-bottom: 15px;
        color: #58b6b0;
        cursor: pointer;
        width: 120px;
        height: 30px;
        line-height: 30px;
        opacity: 1;
        border-radius: 6px;
      }
      .nopay-btn {
        text-align: center;
        padding: 7px 0;
        background-color: #ddd;
        /deep/ .el-button {
          padding: 7px 15px;
          width: 88px;
        }
      }
    }
  }
}
</style>